<template>
  <view class="video-container">
    <ve-navbar title="视频播放">
      <template #right>
        <ve-icon name="screen-orientation" size="40" @click="handleFullScreen" />
      </template>
    </ve-navbar>
    <view class="page-body">
      <video id="myVideo" :style="{ height: playerHeight }" :src="src" @error="videoErrorCallback" controls autoplay />
    </view>
  </view>
</template>

<script>
  // 视频播放页面
  // 默认当竖屏视频播放
  // 进入全屏默认当横屏播放
  export default {
    data() {
      return {
        src: '',
        playerHeight: '',
      }
    },
    onReady: function () {
      this.videoContext = uni.createVideoContext('myVideo')
    },
    methods: {
      // 全屏播放
      handleFullScreen: function () {
        this.videoContext.requestFullScreen({
          direction: -90,
        })
      },
      videoErrorCallback: function (e) {
        console.log('视频错误信息:')
        console.log(e.target.errMsg)
      },
    },
    onLoad(option) {
      this.src = option.src
      if (option['service-code']) {
        if (option.src.includes('?')) {
          this.src = option.src + '&service-code=H5'
        }
      }
      //  ||'https://testapi.qichengcx.com/wvms/uploadFile/image/3485694062669585664.mp4?ticket=6A15A3B2E44633D781E588709FA1C35A&service-code=H5'
      const systemInfo = uni.getSystemInfoSync()
      const statusBarHeight = systemInfo.statusBarHeight
      const windowHeight = systemInfo.windowHeight
      this.playerHeight = windowHeight - statusBarHeight - 90 + 'px'
    },
  }
</script>

<style scoped>
  .video-container {
    height: 100vh;
    background-color: #000;
  }

  video {
    width: 750rpx;
    height: 1350rpx;
  }
</style>
